<template id="dashboard-chartCard">
	<!-- 图表卡片 -->
	<v-row>
		<v-col>
			<v-card flat="">
				<v-card-title class="bb-1">
					<v-row justify="space-between">
						<v-col>一周统计</v-col>
						<v-col cols="4">
							<!-- <v-row>
								<v-col cols="5">
									<v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
										<template v-slot:activator="{on, attrs}">
											<v-text-field class="jh-v-input" v-bind="attrs" v-on="on" v-model="staticItem.startDate" dense single-line filled readonly label="开始日期"></v-text-field>
										</template>
										<v-date-picker v-model="staticItem.startDate"></v-date-picker>
									</v-menu>
								</v-col>
								<div style="margin: auto 0">~</div>
								<v-col cols="5">
									<v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto" left bottom>
										<template v-slot:activator="{on, attrs}">
											<v-text-field class="jh-v-input" v-bind="attrs" v-on="on" v-model="staticItem.endDate" dense single-line filled readonly label="结束日期"></v-text-field>
										</template>
										<v-date-picker v-model="staticItem.endDate"></v-date-picker>
									</v-menu>
								</v-col>
								<v-col cols="1">
									<v-btn color="success" @click="emitGetData" small>查询</v-btn>
								</v-col>
							</v-row> -->
							<range-picker ref="rangeDatePicker" @onsearch="emitGetData" backgroundcolor="#eee"></range-picker>
						</v-col>
					</v-row>
				</v-card-title>
				<v-row justify="space-between">
					<v-col cols="4">
						<div class="chart" ref="leftChart" style="height: 250px"></div>
					</v-col>
					<v-col cols="4">
						<div class="chart" ref="middleChart" style="height: 250px"></div>
					</v-col>
					<v-col cols="4">
						<div class="chart" ref="rightChart" style="height: 250px"></div>
					</v-col>
				</v-row>
			</v-card>
		</v-col>
	</v-row>
</template>
{% include 'component/picker/range-picker.html' %} 
<script type="module">
	Vue.component("dashboard-chartCard", {
		template: "#dashboard-chartCard",
		props: {},
		data: () => ({
			staticItem: {
				startDate: null,
				endDate: null,
			},
			leftChart: null,
			middleChart: null,
			rightChart: null,
		}),
		computed: {},
		watch: {},
		async created() {},
		async mounted() {
			await this.initCharts();
			await this.getChartTimeRange();
			this.emitGetData();
			// 监听窗口大小变化事件，适配图表大小
			window.addEventListener("resize", this.handleResize);
			// await this.setInitOptions();
		},
		async beforeDestroy() {
			// 移除窗口大小变化事件的监听
			window.removeEventListener("resize", this.handleResize);
		},
		methods: {
			emitGetData(dateItem) {
				this.$emit("getData", dateItem);
			},
			async getChartTimeRange() {
				// 获取今天的日期
				let endDate = dayjs(new Date()).format("YYYY-MM-DD");
				// 获取7天前的日期
				let startDate = dayjs(endDate).subtract(7, "day").format("YYYY-MM-DD");
				this.$refs.rangeDatePicker.initDate({endDate,startDate})
			},
			async loading(flag) {
				if (this.leftChart) {
					if (flag) {
						this.leftChart.showLoading();
					} else {
						this.leftChart.hideLoading();
					}
				}
			},
			splitXLabel(labels) {
				return labels.map(label => _.join(_.split(label, "-").splice(1, 2), "-"));
			},
			async initCharts() {
				this.leftChart = await echarts.init(this.$refs.leftChart);
				this.middleChart = await echarts.init(this.$refs.middleChart);
				this.rightChart = await echarts.init(this.$refs.rightChart);
			},
			handleResize() {
				if (this.leftChart) {
					this.leftChart.resize();
				}
				if (this.middleChart) {
					this.middleChart.resize();
				}
				if (this.rightChart) {
					this.rightChart.resize();
				}
			},
			async setInitOptions({ leftOptions, middleOptions, rightOptions }) {
				await this.setLeftChartOptions(leftOptions);
				await this.setMiddleChartOptions(middleOptions);
				await this.setRightChartOptions(rightOptions);
			},
			async setRightChartOptions(options) {
				this.rightChart.setOption(options, true);
			},
			async setMiddleChartOptions(options) {
				this.middleChart.setOption(options, true);
			},
			async setLeftChartOptions(options) {
				this.leftChart.setOption(options, true);
			},
		},
	});
</script>
<style scoped="">
	.bb-1 {
		border-bottom: 1px solid #e3e3e3;
	}
</style>
